<template>
    <div class="coat">
        <top-header></top-header>

        <div v-if="head_state">
            <div class="head">
                <div class="wrap">
                    <span class="head__text--a">Weclome</span>
                    <span class="head__text--b">to</span>
                    <span class="head__text--c">EP</span>
                    <div class="head__color_block"></div>
                </div>
            </div>
        </div>

        <div class="red_line__a"></div>
        <div class="wrap">
            <div class="content">
                <div
                    class="blog-card"
                    v-for="(item, index) in blog.list"
                    @click="toDetail(item.blog_id)"
                >
                    <h1 class="title">{{ item.blog_title || null }}</h1>
                    <!-- <div class="line--wrap">
                        <span class="line--c"></span>
                        <span class="line--a"></span>
                        <span class="line--b"></span>
                        <span class="line--b"></span>
                    </div> -->
                    <div class="triangle"></div>
                    <span class="abstract">{{ item.blog_abstract || 0 }}</span>
                    <p class="category">{{ item.blog_category_id || 0 }}</p>
                    <p class="time">
                        {{ chengeStamp(item.blog_create_time) }}
                    </p>
                </div>

                <div class="describe"></div>
            </div>
        </div>
        <!-- <div class="red_line__b"></div> -->
        <div class="pagination_box">
            <bottom-pagination
                :tovalue="[blog.pageSize, blog.count, blog.page]"
                @revalue="toPage"
                :key="componentKey"
            >
            </bottom-pagination>
            <!-- 子组件传来的值 : {{ blog.page }} -->
        </div>

        <bottom-footer></bottom-footer>
    </div>
</template>

<script setup>
import { watch, onMounted, inject, reactive, ref, onUpdated } from "vue";
// import { router } from "../../common/router";
import { useRouter, useRoute } from "vue-router";
import BottomPagination from "./BottomPagination.vue";
import TopHeader from "../../components/TopHeader.vue";
import BottomFooter from "../../components/BottomFooter.vue";
import { chengeStamp } from "../../utils/GetTime.js";
const axios = inject("axios");
const storeEP = inject("storeEP").state;

// 组件加载顺序
// 获取组件key
// vue 当key改变时会更新组件
// 当父组件有数据后传入子组件 之后强制更新 使得子组件获得数据

// let t = 1
const componentKey = ref(0);
// onUpdated(() => {
//     console.log("从新加载");
//     if (t === 1) {
//         componentKey.value += 1
//         t = 0;
//     }
// })

// 获取首页状态 切换head状态
const head_state = ref(true);
// 获取页面跳转值
function toPage(value) {
    console.log("获取子组件emit的值", value);
    storeEP.pageCount = value
    blog.page = value;
    if (value === 1) {
        head_state.value = true;
    } else {
        head_state.value = false;
    }
    getBlogs();
}

// 获取blog列表
const SEARCH_BLOG_PAGESIZE = 7;
const blog = reactive({
    state: false,
    list: null,
    count: 0, // 文章数
    page: 1, // 当前页面数
    pageSize: SEARCH_BLOG_PAGESIZE,
});
async function getBlogs() {
    let pageSize = SEARCH_BLOG_PAGESIZE;
    let page = blog.page;

    let res_data = await axios.get(
        `/blog/search?page=${page}&pageSize=${pageSize}`
    );
    blog.list = res_data.data.rows;
    blog.count = res_data.data.count;
    blog.state = true;
}

// blog详情页面
const router = useRouter();
const toDetail = async (blog_id) => {
    await router.push({
        path: `/blog/detail`,
        query: {
            blog_id: blog_id,
        },
    });
};

onMounted(() => {
    getBlogs();
});

// 头图变化
var pox = 200;
function changeHeader(newValue, oldValue) {
    var elem = document.getElementsByClassName("head")[0];
    // var header_img = document.getElementsByClassName("header-img")[0]
    // if (newValue >= 80 ) {
    //     pox++
    //     elem.style.height = pox + (newValue - oldValue) + "px";
    //     console.log(elem.style.top);
    // }
    // elem.style.marginBottom = newValue + "px";
}
</script>

<style lang="scss" scoped>
// 背景
.coat {
}

.holder {
    height: 60px;
    background-color: #272727;
}

.head {
    width: 100%;
    height: 480px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-attachment: fixed;
    .wrap {
        border-right: 2px solid var(--main-color-b);
        height: 480px;
    }
    div {
        line-height: 480px;
        font-size: 100px;
        font-weight: 1000;
        text-align: left;
        user-select: none;
        white-space: nowrap;
        // width: 100%;
        // margin: 0 auto;
        .head__text--a {
        }
        .head__text--b {
            font-size: 50px;
        }
        .head__text--c {
        }
        .head__color_block {
            top: 0;
            background-color: #764ba2;
            position: absolute;
            font-size: 10px;
        }
    }
}

// 分割线
.red_line__a {
    background-color: var(--main-color-b);
    // background-color: #ffffff;
    height: 2px;
}
.red_line__b {
    background-color: var(--main-color-b);
    transform: translateY(-16px);
    height: 2px;
}
// 内容容器
.wrap {
    margin: 0 auto;
    width: 75%;

    .content {
        min-height: calc(100vh);
        .blog-card {
            box-shadow: 2px 2px 5px rgba(92, 92, 92, 0.4);
            padding: 10px 0 0 10px;
            margin-bottom: 16px;
            background-color: #FFFFFF;

            .title {
                margin: 0 auto;
            }
            border-left: 2px solid var(--main-color-b);
            .triangle {
                // z-index: -1;
                position: absolute;
                background-color: #db3450;
                height: 20px;
                width: 20px;
                transform: translate(-11px, -30px);
                -webkit-clip-path: polygon(0 100%, 100% 50%, 0 0);
                clip-path: polygon(0 100%, 40% 50%, 0 0);
            }
            .abstract {
                display: block;
                margin: 0 auto;
                padding-right: 30%;
                font-weight: 100;
                font-size: 14px;
                text-shadow: 2px 2px 5px rgba(92, 92, 92, 0.5);
                color: rgb(69, 69, 69);
                height: 80px;
            }

            .category {
                margin: 0 auto;
            }

            .time {
                margin: 0;
            }
        }
        @keyframes blog-card--t {
            50% {
                transform: rotate(1deg);
            }
        }
        .blog-card:hover {
            animation-name: blog-card--t;
            animation-duration: 0.1s;
        }
    }
}
.pagination_box {
    height: calc(18vh);
    line-height: calc(18vh);
}
</style>
